@charset "utf-8";
html {
   background-image: url(background-img.jpg); 
   background-size: cover; 
   background-repeat: no-repeat; 
   background-position: center; 
   background-attachment: fixed; 
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   margin: 0 auto; 
   width: 100%; 
}

#img-one {
   display: block; 
   width: 100%; 
   height: 200px; 
}

body > header {
   margin: 0; 
   width: 100%;
   overflow: hidden; 
}

body > header > nav.horizontalNavigation li {
   width: 33.33%; 
}

nav.horizontalNavigation li {
    display: block; 
    float: left; 
}
 
nav.horizontalNavigation a {
    display: block; 
    text-align: center; 
}

article {
   padding: 0; 
   text-align: left; 
   flex-wrap: wrap; 
   justify-content: space-around; 
   display: flex; 
   margin: 50px auto; 
   max-width: 1200px; 
}

article h1 {
   display: block; 
   color: #4CAF50;
   font-size: 1.6em; 
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

article p {
   margin: 10px; 
   font-size: 1.2em; 
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

#cr-img-one {
   border-radius: 50%; 
   margin: 0px 20px; 
   width: 90%; 
}

#cr-img-two {
   border-radius: 50%; 
   margin: 0px 20px; 
   width: 100%; 
}

#cr-img-three {
   border-radius: 50%; 
   margin: 0px 20px; 
   width: 70%; 
}

#cr-img-four {
   border-radius: 50%; 
   margin: 0px 20px; 
   width: 80%; 
   filter: brightness(1.1); 
}

#cr-img-five {
   border-radius: 50%; 
   margin: 0px 20px; 
   width: 100%; 
   filter: opacity(90%); 
}

#cr-img-six {
   border-radius: 50%;
   margin: 0px 20px; 
   width: 70%; 
}

.card {
   display: flex;
   flex-direction: column; 
   align-items: center; 
   padding: 20px; 
   margin: 20px; 
   border-radius: 10px;
   background-color: rgb(241, 236, 202); 
   filter: opacity(0.95); 
   box-shadow: 0px 10px 15px 0px rgb(229, 240, 132); 
   width: calc(33.33% - 40px); 
   box-sizing: border-box; 
}

.card-text {
   text-align: center; 
   margin-top: 20px;
}

.card:hover {
   transform: scale(1.05); 
   transform: rotate(10deg); 
}

footer {
   background-color: #55bd40; 
   color: white; 
   text-align: center; 
   padding: 10px 0; 
   position: relative; 
   width: 100%; 
   bottom: 0; 
}